// 脱贫目标趋势图
// $('#mb-overcome').css('height',$('.mb-long-hold').height() - 40)
var charts = echarts.init(document.getElementById('mb-overcome'));
setInterval(function(){
    // $('#mb-overcome').css('width',($('.mb-long-hold').width()-40));
    $('#mb-overcome').css('height',($('.mb-long-hold').height()))
    charts.resize();
},200)
window.addEventListener('resize', function(){
    charts.resize();
})
// chart.showLoading();//显示等待条
//设置图表显示的内容
var options = {
    label:{
        color: '#fff',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#fff'
            }
        }
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    grid: {
        bottom:20,
        left:40,
        right:40
    },
    legend: {
        selectedMode: false,//不可点击
        data:['目标数','实际完成数','完成率'],
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: [

        {
            type: 'category',
            data: ['2018','2017','2016','2015','2014','2013','2012'],
            axisPointer: {
                type: 'shadow',
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 800,
            interval: 200,
            axisLabel: {
                formatter: '{value} ',
                textStyle: {
                    color: '#fff'
                }
            }
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 80,
            interval: 20,
            axisLabel: {
                formatter: '{value} %',
                textStyle: {
                    color: '#fff'
                }
            }
        }
    ],
    series: [
        {
            name:'目标数',
            type:'bar',
            barWidth : 10,//柱图宽度
            itemStyle: {

                //通常情况下：
                normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: 'rgba(255,255,255,0.5)',
                },
            },
            barGap:'-100%',
            data:[450, 560, 632, 789, 673, 241,356]
        },
        {
            name:'实际完成数',
            type:'bar',
            barWidth : 10,//柱图宽度
            itemStyle: {

                //通常情况下：
                normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: '#3b87fa'
                },
            },
            data:[260, 270, 456, 322, 324, 234, 182]
        },
        {
            name:'完成率',
            type:'line',
            yAxisIndex: 1,
            itemStyle : {
                normal: {
                    label : {

                        show: true,
                    },
                    lineStyle:{
                        color:'#a8690e'
                    },
                    color:'#fff',
                }
            },
            data:[56, 54, 78, 56, 43, 57, 16]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
charts.setOption(options);
charts.on('click',function(params){
    if(params.componentSubType == 'line'){
        $(".zp-pop-up").show(200);
    }
    // console.log(params.data)
    // console.log(params.componentSubType)
    // $(".zp-pop-up").css('display','block');
})
//两秒后关闭等待进度条
setTimeout(function () {
    charts.hideLoading();//隐藏等待条
}, 2000);

